<template>
  <view :style="'height:'+barHeight+'px'">
    <view >
      <view style="bottom: 0;z-index:99;position: fixed;width: 100vw;background: #ffffff;">
        <view class="f_row_center" style="height: 110rpx">
          <view class="flex_1 f_column_center" @click="itemClick(ind)" v-for="(item,ind) in options" :key="ind"
                :class="[active==ind?'tabbar_select':'tabbar_no_select']">
            <image :lazy-load="true" :src="active==ind?item.selectImg:item.normalImg" style="width: 40rpx;height: 40rpx"/>
            <view style="margin-top: 10rpx">{{ item.title }}</view>
          </view>
        </view>
        <view v-if="isIphoneXSeries" class="tabbar_common"></view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import {Prop, Vue, Component} from "vue-property-decorator";
import BaseApi from "@/api/BaseApi";
import {mixins} from "vue-class-component";

@Component({
  components: {}
})
export default class BottomTabView extends mixins(Vue) {
  @Prop() options?: any;
  @Prop() active?: any;
  @Prop() height?: any;

  get isIphoneXSeries() {
    let sc: any = BaseApi.instance().getSystmeInfo()
    return sc?.isIphoneXSeries ? true : false;
  }
  created(){
    BaseApi.instance().getBarHeight();
  }

  itemClick(ind: any) {
    this.$emit('change', ind)
  }
  get barHeight() {
    return BaseApi.instance().barHeight;
  }
}
</script>

<style scoped>
.tabbar_select {
  color: #3F77F4;
  font-size: 22rpx
}

.tabbar_no_select {
  color: #969696;
  font-size: 22rpx
}


</style>